<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <link rel="stylesheet" href="../../bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="../../bootstrap-icons/font/bootstrap-icons.min.css">
   <link rel="stylesheet" href="../../css/index.css">
   <link rel="shortcut icon" href="../../img/A.png"  type="image/x-icon">
   <script src="../../bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="../../bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   <script src="../../vue/jquery.min.js"></script>
   <script src="../../vue/vue.min.js"></script>
   <title>后台管理系统</title>
   <script src="../../echarts/echarts.min.js"></script>
</head>

<body>
<!-- 页面的起步 -->
<div class="container pt-5" style="font-family:'Times New Roman', Times, serif;">
   <div class="row">
      <!--页面导航栏列表 -->
      <div class="col-md-2">
         <!-- 网站logo -->
         <div class="mb-5 bg-light"
              style="font-family:fantasy;direction: ltr; position: fixed;z-index: 10; left: 65px; top: 38px;">
            <h3><img style=" width: 20%; height: 20%;" src="../../img/A.png"/><span>ArkanTv</span></h3>
         </div>

         <!-- 垂直导航栏 展示导航 -->
         <div class="col-md-2" style="position: fixed;top: 100px; overflow-y:auto;height: 80vh; direction:rtl;">
            <nav class="navbar bg-light" style="direction: ltr;">
               <div class="container-fluid">
                  <ul class="nav nav-pills flex-column text-start">
                     <li class="nav-item mb-2">
                        <a class="nav-link" href="index.html"><i class="bi bi-text-indent-left"></i><span
                                class="m-3">统计</span></a>
                     </li>
                     <li class="nav-item mb-2">
                        <a class="nav-link" href="movie"><i class="bi bi-camera-video"></i><span
                                class="m-3">电影</span></a>
                     </li>

                     <li class="nav-item mb-2">
                        <a class="nav-link" href="of_play"><i class="bi bi-play-btn"></i><span
                                class="m-3">短视频</span></a>
                     </li>

                     <li class="nav-item mb-2">
                        <a class="nav-link" href="user"><i class="bi bi-person-add"></i><span
                                class="m-3">用户管理</span></a>
                     </li>

                     <li class="nav-item mb-2">
                        <a aria-current="page" class="nav-link active" href="coin"><i
                                class="bi bi-coin"></i><span
                                class="m-3">会员金额</span></a>
                     </li>

                     <li class="nav-item mb-2">
                        <a aria-current="page" class="nav-link" href="prizes"><i
                                class="bi bi-cash-stack"></i><span
                                class="m-3">抽奖礼品</span></a>
                     </li>

                     <li class="nav-item mb-2">
                        <a aria-current="page" class="nav-link" href="selection"><i
                                class="bi bi-signpost-split"></i><span
                                class="m-3">导航列表</span></a>
                     </li>

                  </ul>
               </div>
            </nav>
         </div>

      </div>

      <!-- 页面的col-10部分 -->
      <div class="col-md-10 pb-5" style="z-index: 10;" id="coinApp">
         <!-- 日期 / 搜索 -->
         <div class="row">
            <div class="col-md-5">

               <!-- 当前日期 -->
               <div class="text-start">
                  <h3>当前日期</h3>
                  <p style="font-family:fantasy;" v-text="currentDate"></p>
               </div>
            </div>

            <!-- 搜索框 -->
            <div class="col-md-4">
               <form>
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="输入关键字...">
                     <span class="input-group-text"><button type="button" class="btn  btn-sm"><i
                           class="bi bi-search"></i></button></span>
                  </div>
               </form>
            </div>

            <!-- 登录图标-->
            <div class="col-md-3 text-end">
               <span>ArTv10001</span>
               <img src="../../img/tu2.jpg" style="border-radius: 100%; width: 65px; height: 65px;"/>
            </div>
         </div>

         <!-- 本站导航栏 -->
         <div class="row">
            <div class="col-md-12">
               <!-- 导航 -->
               <ul class="nav nav-pills">
                  <li class="nav-item">
                     <a class="nav-link active" data-bs-toggle="pill" href="#home">会员卡片</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" data-bs-toggle="pill" href="#menu1">敬请期待</a>
                  </li>
               </ul>


               <div class="tab-content">
                  <!--            提示框-->
                  <div v-show="isMessage" style="position: fixed;z-index: 10;top: 20px; left: 50%"
                       class="col-md-2 bg-primary p-1 text-center text-white rounded-1"><b v-text="message"></b>
                  </div>
                  <!-- 会员卡片 -->
                  <div class="tab-pane container active text-center " id="home">
                     <!--         加载动画-->
                     <div class="spinner" v-show="load">
                        <div class="bounce1"></div>
                        <div class="bounce2"></div>
                        <div class="bounce3"></div>
                     </div>
                     <div class="row">
                        <div class="col-md-3 text-black rounded-3 pb-3 m-4 text-center"
                             style="background-color: #EDE5EC" v-for="(res,index) in alpay">
                           <h4 class="mt-2" v-text="res.name">会员1</h4>
<!--                           <h4 class="mt-2" v-text="res.names">会员1</h4>-->
                           <div class="text-start">
                              <div class="mt-3"><b>会员折价:</b> <span class="mx-4">￥ {{res.currentPrice}}</span></div>
                              <div class="mt-3"><b>会员原价:</b> <span class="mx-4">￥ {{res.originalPrice}}</span></div>
                              <div class="mt-3 d-flex"><b>显示状态:</b>
                                 <span class="form-check form-switch mx-4" style=" cursor: pointer;">
                              <input v-model="res.displayed" v-bind:value="res.id" @change="oncheckbox"
                                     class="form-check-input" type="checkbox" name="checkbox" checked></span></div>
                              <div v-bind:id="res.id" v-show="res.id === isVisible">
                                 <div class="nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                       <input type="text" v-model="res.name" class="form-control" id="weibiao"
                                              placeholder="Enter email"
                                              name="email">
                                       <label for="weibiao">期限标题:</label>
                                    </div>
                                 </div>
                                 <div class="nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                       <input v-model="res.currentPrice" type="text" class="form-control" id="Id"
                                              placeholder="Enter email"
                                              name="videoId">
                                       <label for="id">折扣:</label>
                                    </div>
                                 </div>
                                 <!-- 维标题 -->
                                 <div class="nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                       <input type="text" v-model="res.originalPrice" class="form-control" id="weibiao"
                                              placeholder="Enter email"
                                              name="email">
                                       <label for="weibiao">原价:</label>
                                    </div>
                                 </div>
                                 <!-- 维标题 -->
                                 <div class="nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                       <input type="text" v-model="res.days" class="form-control" id="weibiao"
                                              placeholder="Enter email"
                                              name="email">
                                       <label for="weibiao">天数:</label>
                                    </div>
                                 </div>
                              </div>

                              <div class="mt-3">
                                 <a class=" d-grid" v-bind:href="'#'+res.id" data-bs-toggle="collapse"><button
                                       type="button"  @click="onUpdate(alpay[index])" class="btn btn-primary btn-block">修改金额</button></a>
                              </div>
                           </div>
                        </div>
                     </div>

                  </div>
                  <!-- 敬请期待 -->
                  <div class="tab-pane container fade" id="menu1">

                  </div>

               </div>

            </div>
         </div>
      </div>
   </div>
</div>
</body>
<!-- 周度 -->
<script src="../../js/coin.js"></script>
<script src="../../js/utils.js"></script>
</html>